<template>
  <div class="font-box">
    <span class="slider-number">{{ curFontSize }}</span>
    <el-button
      :link="true"
      type="primary"
      class="slider-number-left"
      @click="handleFontSize('reduce')"
    >
      <el-icon><Remove /></el-icon>
    </el-button>
    <el-slider
      v-model="curFontSize"
      :min="min"
      :max="max"
    ></el-slider>
    <el-button
      :link="true"
      type="primary"
      class="slider-number-right"
      @click="handleFontSize('add')"
    >
      <el-icon><CirclePlus /></el-icon>
    </el-button>
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: Number,
    },
    min: {
      type: Number,
      default: 11,
    },
    max: {
      type: Number,
      default: 50,
    },
  },
  emits: ['update:value'],
  data() {
    return {
      curFontSize: this.value,
    };
  },
  watch: {
    value(newVal) {
      this.curFontSize = newVal;
    },
    curFontSize(newVal) {
      this.$emit('update:value', newVal);
    },
  },
  methods: {
    handleFontSize(type) {
      if (type === 'add') {
        this.curFontSize ++;
      } else {
        this.curFontSize --;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.font-box{
  display: flex;
  align-items: center;
  .slider-number{
    margin-right: 5px;
  }
  .slider-number-left{
    margin-right: 10px;
  }
  .slider-number-right{
    margin-left: 10px;
  }
  .el-slider{
    width: 110px;
  }
}
</style>
